<template>
  <div>
    <el-dialog title="线路详情" :visible.sync="showDialog_" custom-class='dialog_right dialogScroll_detail MkRouteDetail' top="0%" @close='closeDialog("addTypeForm")' @open='openDialog'>
      <div class="operationBtnInRightDialog">
        <mk-permission :perms="['Ticket:LineManagement:Line:update']">
          <span class='infoIcon' @click="editRoute" ><i class="el-icon-edit"></i> 编辑</span>
        </mk-permission>
        <mk-permission :perms="['Ticket:LineManagement:Line:delete']">
          <span class='infoIcon' @click="deleteRoute" ><i class="el-icon-delete"></i> 删除</span>
        </mk-permission>
      </div>
      <el-scrollbar :wrapStyle="[{maxHeight:(bodyHeight - 110)+'px'}]">
        <div class="contentDiv">
          <el-row :gutter="20">
            <el-col :span = "4" class="textAlignRight fontColorThree">乘车车站</el-col>
            <el-col :span = "20" class="fontColorTwo">{{detailObj.startSite?detailObj.startSite.name:''}}</el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span = "4" class="textAlignRight fontColorThree">终点站</el-col>
            <el-col :span = "20" class="fontColorTwo">{{detailObj.endSite?detailObj.endSite.name: ''}}</el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span = "4" class="textAlignRight fontColorThree">途经站</el-col>
            <el-col :span = "20" class="fontColorTwo">{{detailObj.midwayLines | midwayLines}}</el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span = "4" class="textAlignRight fontColorThree">关联车辆</el-col>
            <el-col :span = "20" class="fontColorTwo">{{detailObj.buses | buses}}</el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span = "4" class="textAlignRight fontColorThree">总票数</el-col>
            <el-col :span = "20" class="fontColorTwo">{{detailObj.totalTicket}}</el-col>
          </el-row>
          <div style = 'padding-top:20px;margin-top:20px;border-top:1px solid #f0f3f6;'>票价及说明</div>
          <table class="tabStyle">
            <thead>
              <tr>
                <td>乘车车站</td>
                <td>到达车站</td>
                <td style="width:76px;">距离(公里)</td>
                <td style="width:76px;">耗时(小时)</td>
                <td style="width:66px;">票价(元)</td>
              </tr>
            </thead>
            <tbody>
            <template v-for="item in tableData">
              <tr>
                <td>{{item.startSite}}</td>
                <td>{{item.endSite}}</td>
                <td>{{item.distance}}</td>
                <td>{{item.time}}</td>
                <td style="border-right:#dfecec">{{item.price}}</td>
              </tr>
            </template>
            </tbody>
          </table>
        </div>
      </el-scrollbar>
    </el-dialog>

    <!--添加/编辑线路-->
    <mk-add-route :showDialog='dialogVisible_edit' :currentRoute = 'detailObj' v-on:closeDialog='closeDialog_edit'></mk-add-route>
  </div>
</template>

<script>
import routeService from '../../../services/route'
import { mapState } from 'vuex'
import MkAddRoute from './MkAddRoute.vue'
import MkPermission from "../../../components/MkPermission";
export default {
  name: 'MkRouteDetail',
  components: {
    MkAddRoute,MkPermission
  },
  props: ['showDialog','currentId'],
  computed: mapState({
    bodyHeight: state => state.global.bodyHeight,
  }),
  filters: {
    buses(val) {
      if(val) {
        let arr  = [];
        val.forEach((item)=>{
          arr.push(item.plateNumber);
        })
        return arr.join('，');
      }else{
          return ''
      }
    },
    midwayLines(val) {
      if(val){
        let arr  = [];
        val.forEach((item)=>{
          if(item.siteType == 'Midway'){
            arr.push(item.endSite.name);
          }
        })
        return arr.join('，');
      }else{
          return ''
      }
    }
  },
  methods: {
    closeDialog_edit(type) {
      this.isRefresh = type;
      this.dialogVisible_edit = false;
      this.showDialog_ = false;
    },
    editRoute() {
      this.dialogVisible_edit = true;
    },
    deleteRoute() {
      this.$confirm('此操作将删除该线路, 是否继续?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        customClass: 'confirmBox_warning'
      }).then(() => {
        routeService.deleteLine({id:this.currentId},() => {
            this.$message.success('删除成功');
            this.isRefresh = 'yes';
            this.showDialog_ = false;
        })
      }).catch(()=>{

      });
    },
    closeDialog() {
      this.$emit('closeDialog',this.isRefresh);
    },
    loadDetail() {
      routeService.loadLineDetail({id:this.currentId}, (data) => {
          this.detailObj = data.data;
          let midwayLines = data.data.midwayLines;
          let arr = [];
          let startSite = midwayLines[0].startSite.name;
          midwayLines.forEach((item,index) => {
              arr.push({
                startSite:startSite,
                endSite: item.siteType == 'End'?data.data.endSite.name:item.endSite.name,
                price:item.price,
                distance:item.distance,
                time:item.time
              })
          })
        this.tableData = arr;
      })
    },
    openDialog() {
      this.isRefresh = 'no';
      this.loadDetail();
    },
  },
  watch: {
    showDialog: function(value) {
      this.showDialog_ = value;
    }
  },
  data () {
    return {
      dialogVisible_edit: false,
      tableData: [],
      detailObj:{},
      isRefresh: 'no',
      showDialog_: this.showDialog,
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less'>
 @import '../../../assets/style/main.less';
  .MkRouteDetail{
    .el-row{
      line-height: 40px;
    }
    .tabStyle{
      border-collapse:collapse;
      width:100%;
      box-sizing:border-box;
      border:1px solid #dfecec;
      margin-top:10px;
      line-height: 36px;
      text-align: center;
      thead{
        td{
          border:1px solid #dfecec;
          background:@borderColor;
          color:@fontColorThree;
        /*  border:1px solid @fontColorThree;*/
        }
      }
      tbody{
        line-height: 46px;
        td{
          border-left:1px solid #dfecec;
          border-bottom:1px solid #dfecec;
        }

      }
    }
  }
</style>
